<template>
  <div class="pet_listitem">
    <ListItem :petList="petList" />
    <div
      class="adopt_status"
      :class="[isAdopt ? 'active' : '']"
      v-if="isAdoptRoute"
    >
      {{ isAdopt ? "成功领养" : "待发布者确定" }}
    </div>
    <div class="adopt_cancel" v-if="isAdoptRoute && !isAdopt">
      <svg
        class="icon_cancel"
        aria-hidden="true"
        @click.stop="handelCancle(petList.pet_id)"
      >
        <use xlink:href="#icon-quxiao1"></use>
      </svg>
    </div>
  </div>
</template>

<script>
import ListItem from "@/components/ListItem";
import { useRoute } from "vue-router";
import { ref, watchEffect } from "vue";
import { Dialog, Toast } from "vant";
import { deteletAdopt } from "@/api/user";
export default {
  name: "PetListItem",
  props: ["petList"],
  components: { ListItem },
  setup(props, { emit }) {
    const route = useRoute();
    // console.log(route.path);
    //判断宠物是否已被发布者确认被领养
    const isAdopt = ref(false);
    if (props.petList.pet_collar_status == "true") {
      isAdopt.value = true;
    }
    //判断是否在用户领养页面
    const isAdoptRoute = ref(false);
    watchEffect(() => {
      if (route.path == "/user/adopt") {
        isAdoptRoute.value = true;
      }
    });
    //取消领养
    const handelCancle = (id) => {
      Dialog.confirm({
        title: "取消提示",
        message: "你确定想要取消领养这个宠物吗？",
      })
        .then(() => {
          deteletAdopt(id).then((res) => {
            if (res.status == 200) {
              Toast("取消成功");
              emit("getAdoptPetList");
            }
          });
        })
        .catch(() => {});
    };
    return { isAdoptRoute, isAdopt, handelCancle };
  },
};
</script>

<style scoped lang="less">
.pet_listitem {
  position: relative;
  width: 46.5%;
  height: 12rem;
  margin: 0.3rem;
  border-radius: 0.5rem;
  background-color: #fff;
  overflow: hidden;
  border: 1px solid #ff976a;
  .adopt_status {
    position: absolute;
    bottom: 0;
    left: auto;
    width: 100%;
    height: 1.4rem;
    color: #ff6034;
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.5rem;
    background-color: rgba(0, 0, 0, 0.1);
  }
  .active {
    color: #07c160;
  }
  .adopt_cancel {
    position: absolute;
    top: 0.1rem;
    right: 0;
  }
}
.icon_cancel {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
  overflow: hidden;
}
</style>
